<template>
	<view class="edit-box">
	  <view style="margin:62rpx 0 44rpx 0;font-size:36rpx;">取个名吧！</view>
	  <view>
	    <input type="text" class="my-input" maxlength="5" v-model="newName"/>
	  </view>
	  <view :class="'mask-' + (newName ? 'confirm' : 'cancel') + '-btn item-save-btn f-center'" @click="saveName">
	    保存
	  </view>
	</view>
</template>

<script>
	export default{
		props:['name'],
		data(){
			return {
				oldName:'',
				newName:''
			}
		},
		created(){
			this.oldName = this.name
			this.newName = this.name
		},
		methods: {
			setData(obj){
				for(let i of Object.keys(obj)){
					this[i] = obj[i]
				}
			},
		  saveName(){
		    if(!this.newName){
		      return
		    }
		    this.$emit('namesave',{name:this.newName,oldName:this.oldName})
		  }
		}
	}
</script>

<style>
	/* components/edit-mode-name/index.wxss */
	.edit-box{
	  width: 600rpx;
	  height: 444rpx;
	
	  display: flex;
	  flex-direction: column;
	  
	  align-items: center;
	
	  font-size: 28rpx;
	  color: #404040;
	  background: #fff;
	  border-radius: 36rpx;
	}
	
	.item-save-btn{
	  width: 180rpx;
	  height: 80rpx;
	  font-size: 40rpx;
	  margin-top: 70rpx;
	}
	
	.my-input{
	  width: 400rpx;
	  height: 72rpx;
	  box-sizing: border-box;
	  background-color: #C4C4C447;
	  border-radius: 100rpx;
	  padding: 0 32rpx;
	  caret-color:#f5736e;
	}
</style>